<!-- 文章列表项 -->
<template>
  <van-cell
    class="article-item"
    :to="{ name: 'articles', params: { articleId: article.art_id } }"
  >
    <template #title>
      <div class="van-multi-ellipsis--l2 title">
        {{ article.title }}
      </div>
    </template>
    <template #label>
      <div v-if="article.cover.type === 3" class="photos">
        <van-image
          fit="cover"
          v-for="(img, index) in article.cover.images"
          :key="index"
          :src="img"
        />
      </div>
      <div class="label-wrap">
        <span>{{ article.aut_name }}</span>
        <span>{{ article.comm_count }}评论</span>
        <span>{{ article.pubdate | relativeTime }}</span>
      </div>
    </template>
    <template>
      <van-image
        v-if="article.cover.type === 1"
        width="116"
        height="73"
        :src="article.cover.images[0]"
        fit="cover"
      />
    </template>
  </van-cell>
</template>

<script>
export default {
  name: "ArticleItem",
  data() {
    return {};
  },
  props: ["article"],
  methods: {},
};
</script>

<style lang= "less" scoped>
.article-item {
  width: 100%;
  .title {
    font-size: 16px;
    color: #3a3a3a;
  }
  /* 单个图片样式 */
  /deep/.van-cell__value {
    flex: unset;
    margin-left: 5px;
  }

  .photos {
    display: flex;
    height: 73px;
    width: 100%;
    margin: 10px 0;

    .van-image {
      flex: 1;
      &:not(:last-child) {
        padding-right: 4px;
      }
    }
  }
  .label-wrap {
    font-size: 12px;
    color: #b4b4b4;
    span {
      margin-right: 10px;
    }
  }
}
</style>